<template>
    <div class="ts-container-tooltip">
        <div class="ts-container-tooltip--item">
            <el-tooltip class="box-item" effect="dark" content="重置摄像机" placement="left">
                <i-carbon-fit-to-screen @click="recoveryPerspective" />
            </el-tooltip>
        </div>
        <div class="ts-container-tooltip--item">
            <el-tooltip class="box-item" effect="dark" content="将相机向左旋转90°" placement="left">
                <i-carbon-rotate-counterclockwise @click="rollLeft()" />
            </el-tooltip>
        </div>
        <div class="ts-container-tooltip--item">
            <el-tooltip class="box-item" effect="dark" content="将相机向右旋转90°" placement="left">
                <i-carbon-rotate-clockwise @click="rollRight()" />
            </el-tooltip>
        </div>
        <div class="ts-container-tooltip--item">
            <el-tooltip class="box-item" effect="dark" content="将相机重置为方向X" placement="left">
                <span @click="recoveryPerspectiveXYZ('x')">X</span>
            </el-tooltip>
        </div>
        <div class="ts-container-tooltip--item">
            <el-tooltip class="box-item" effect="dark" content="将相机重置为方向Y" placement="left">
                <span @click="recoveryPerspectiveXYZ('y')">Y</span>
            </el-tooltip>
        </div>
        <div class="ts-container-tooltip--item">
            <el-tooltip class="box-item" effect="dark" content="将相机重置为方向Z" placement="left">
                <span @click="recoveryPerspectiveXYZ('z')">Z</span>
            </el-tooltip>
        </div>
    </div>
</template>
   
<script setup>
import { defineComponent } from "vue";
import registerStore from '../../../stores/index'
const { toolModulePinia } = registerStore();
const { recoveryPerspective, recoveryPerspectiveXYZ } = toolModulePinia
const rollLeft = () => {
    toolModulePinia.rollLeft()
}
const rollRight = () => {
    toolModulePinia.rollRight()
}
</script>
   
<style>
.ts-container-tooltip {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    flex-direction: column;
    color: white;
    font-size: 20px;
    align-items: center;
    padding: 4px 0;
    z-index: 9999;
}

.ts-container-tooltip--item {
    padding: 0 8px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 50%;
}
</style>